import React from 'react';
import { Col, Form, Row } from 'antd';

import DataCard from '@/components/DataCard';
import InfoFormItem from '@/components/InfoFormItem';
import { PLATFORM_INFO_FORM_LAYOUT } from '@/utils/const';

const Platform = (props: { loading: boolean; data: any }) => {
  const { loading, data = {} } = props;

  const { access_type = {} } = data;
  const { sdk, cig_channel, cig, gb } = access_type;

  const infoItems = [
    {
      label: 'SDK接入设备数量',
      value: `${sdk} 个`,
    },
    {
      label: 'CIG接入设备数量',
      value: `${cig_channel + cig} 个`,
    },
    {
      label: '国标接入设备数量',
      value: `${gb} 个`,
    },
  ];

  return (
    <DataCard title="前端设备接入" loading={loading}>
      <Row gutter={64}>
        <Col span={8}>
          <Form {...PLATFORM_INFO_FORM_LAYOUT}>
            {infoItems.map(item => (
              <InfoFormItem label={item.label} key={item.label}>
                {item.value}
              </InfoFormItem>
            ))}
          </Form>
        </Col>
      </Row>
    </DataCard>
  );
};

export default Platform;
